<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friendadd"></i>文章维护——查看详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="content_diy">
        <ul>
          <li>
            <h2>文章信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>文章名称：</label>
                <p>{{list.news_name}}</p>
              </dd>
              <dd>
                <label>文章作者：</label>
                <p>{{list.news_author}}</p>
              </dd>
              <dd>
                <label>文章分类：</label>
                <p>{{list.news_class}}</p>
              </dd>
              <dd>
                <label>广告ID：</label>
                <p>
                  <span v-if="noData">暂无数据</span>
                  <span v-if="adver_A">
                    ID:{{list.advert_id}}
                    <el-button type="primary" class="ml20" @click="ADVERdialogVisible = true">查看详情</el-button>
                  </span>
                </p>
              </dd>
              <dd v-if="autoFLag">
                <label>音频文件：</label>
                <div class="js">
                  <div class="mp3">
                    <span>{{list.audio_name}}</span>
                    <audio :src="list.audio" controls="controls"></audio>
                  </div>
                </div>
              </dd>
              <dd>
                <label>文章简介：</label>
                <div class="js">{{list.news_introduction}}</div>
              </dd>
              <dd>
                <label>文章封面：</label>
                <p>
                  <img :src="list.news_cover" preview="0" preview-text="文章封面">
                </p>
              </dd>
              <dd>
                <label>发布时间:</label>
                <p>{{list.set_time}}</p>
              </dd>
              <dd>
                <label>文章内容：</label>
                <div class="js" v-html="list.news_content"></div>
              </dd>
              <dd v-if="showIF">
                <label>驳回原因：</label>
                <div class="js">{{list.turn_down}}</div>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
    <!-- 广告详情页面 -->
    <el-dialog
      title="广告详情"
      :visible.sync="ADVERdialogVisible"
      width="90%"
      :before-close="ADVERhandleClose"
    >
      <div class="ad_info">
        <dl class="dl_diy">
          <dd>
            <label>广告名称：</label>
            <p>{{advert_name}}</p>
          </dd>
          <dd>
            <label>广告封面图：</label>
            <p>
              <img :src="advert_cover" preview="0" preview-text="广告封面图">
            </p>
          </dd>
          <dd>
            <label>广告介绍：</label>
            <div class="js">{{advert_introduce}}</div>
          </dd>
          <dd>
            <label>广告内容：</label>
            <div class="js" v-html="advert_content"></div>
          </dd>
        </dl>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "../../../http/api.js";
export default {
  data() {
    return {
      id: this.$route.query.id,
      showIF: false,
      list: {},
      Token: sessionStorage.getItem("Token"),
      noData: false, //暂时没有数据
      adver_A: false, //查看详情默认不显示
      ADVERdialogVisible: false, //默认广告详情弹窗
      advert_name: null,
      advert_cover: null,
      advert_introduce: null,
      advert_content: null,
      playFlag: false,
      autoFLag: false //默认音频文件不显示
    };
  },
  methods: {
    getData() {
      this.$post(api.news_info, {
        token: this.Token,
        news_id: this.id
      })
        .then(res => {
          if (res.status == "0") {
            this.list = res.data;
            this.advert_name = res.data.advert.advert_name;
            this.advert_cover = res.data.advert.advert_cover;
            this.advert_introduce = res.data.advert.advert_introduce;
            this.advert_content = res.data.advert.advert_content;
            this.audio = res.data.audio;
            //如果有驳回的 显示原因
            if (res.data.status == "2") {
              this.showIF = true;
            }
            //如果广告链接没有的话！
            if (res.data.advert_id == "0") {
              this.noData = true;
            } else {
              this.adver_A = true;
            }
            if (res.data.audio) {
              this.autoFLag = true;
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    ADVERhandleClose() {
      //关闭弹框
      this.ADVERdialogVisible = false;
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style scoped>
ul li {
  list-style: none;
}
.container .title {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li h2 {
  color: #f00;
  font-size: 18px;
}
.dl_diy {
  width: 80%;
  margin: 0 auto;
}
.dl_diy dd {
  display: flex;
  justify-content: flex-start;
  border: 1px solid #d2cccc;
  border-radius: 3px;
  margin-top: -1px;
}
.dl_diy dd label {
  font-size: 16px;
  font-weight: bold;
  flex: 2;
  padding: 10px 0;
  text-align: center;
  border-right: 1px solid #d2cccc;
}
.dl_diy dd p {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
.dl_diy dd p img {
  max-width: 100%;
}
.ad_info {
  width: 100%;
}
.dl_diy dd .js {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
<style>
/* 这个插件重置样式一定不要加scoped */
/* 去除图片插件里面分享按钮 */
.pswp__button--share {
  display: none !important;
}
.pswp__caption__center {
  max-width: 100% !important;
  text-align: center !important;
}
.ml20 {
  margin-left: 30px;
}
.dl_diy dd .js img {
  max-width: 100% !important;
}
.dl_diy dd .js .mp3 {
 display: flex;
 justify-content:flex-start;
 align-items: center;
}
</style>
